import React from 'react';
import { Typography, Empty, Popover } from 'antd';
import { IconReply, IconReplyAll, IconTransmit } from '@/components/Custom/Icons';
import { history } from 'umi'
import { eventTrack } from '@/utils/track';
import styles from './styles.less';

const { Paragraph } = Typography;

// 邮件内容
const MailContent = ({ mailId, query = {}, subject }) => (
    <div className={styles.mailContentWrap}>
        {mailId ? (
            <>
                <div className={styles.mailTitleBar}>
                    <Paragraph ellipsis className={styles.mailTitle} >
                        <span title={subject}>{subject}</span>
                    </Paragraph>
                    <span>
                        {query.mailType === 'in' && (
                            <Popover content="回复" placement="bottom">
                                <IconReply
                                    className={styles.mailBtn}
                                    onClick={async () => {
                                        // 埋点
                                        await eventTrack({
                                            eventName: 'inbox_view_reply_click',
                                            eventProps: { reply_email_num: 1 }
                                        });
                                        history.push(`/personal/message/mails/create?mailId=${mailId}&doType=1`);
                                    }}
                                />
                            </Popover>
                        )}
                        <Popover content="回复全部" placement="bottom">
                            <IconReplyAll
                                className={styles.mailBtn}
                                onClick={async () => {
                                    // 埋点
                                    await eventTrack({
                                        eventName: 'inbox_view_replyall_click',
                                        eventProps: { reply_email_num: 1 }
                                    });
                                    history.push(`/personal/message/mails/create?mailId=${mailId}&doType=2`);
                                }}
                            />
                        </Popover>
                        <Popover content="转发" placement="bottom">
                            <IconTransmit
                                className={styles.mailBtn}
                                onClick={async () => {
                                    // 埋点
                                    await eventTrack({
                                        eventName: 'inbox_view_forward_click',
                                        eventProps: { reply_email_num: 1 }
                                    });
                                    history.push(`/personal/message/mails/create?mailId=${mailId}&doType=3`);
                                }}
                            />
                        </Popover>
                    </span>
                </div>
                <iframe
                    title="邮箱内容"
                    src={`/personal/message/mails/mailInfo?mailId=${mailId}&mailType=${query.mailType}`}
                    style={{ height: 'calc(100vh - 400px)', width: '96%', margin: '0 2%' }}
                    frameBorder="0"
                ></iframe>
            </>
        ) : (
            <div className={styles.emptyDataWrap}>
                <Empty
                    description="未选择邮件，暂无邮件内容"
                    imageStyle={{ marginBottom: 16 }}
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                />
            </div>
        )}
    </div>
);

export default MailContent;
